<template>
  <el-form :rules="rules"
           :model="loginForm"
           ref="loginForm"
           class="loginContainer"
           label-position="left"
           label-width="0px"
           v-loading="loading"
           element-loading-text="正在登录..."
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)">
    <h3 class="loginTitle">系统登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input size="normal" type="text" v-model="loginForm.code" auto-complete="off"
                placeholder="点击图片更换验证码" @keydown.enter.native="submitClick" style="width: 250px"></el-input>
      <img :src="vcUrl" @click="updateVerifyCode" alt="" style="cursor: pointer">
    </el-form-item>
    <el-checkbox class="loginRemember" v-model="checked" label-position="left">记住密码</el-checkbox>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%" @click="submitClick">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    export default {
      name: "Login",
        data() {
          return {
            checked: true,
            loading: false,
            vcUrl: '/verifyCode?time=' + new Date(),
            loginForm: {
              username: 'admin',
              password: '1234',
              code: ''
            },
            rules: {
              username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
              password: [{required: true, message: '请输入密码', trigger: 'blur'}],
              code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
            }
          }
        },
      methods: {
        updateVerifyCode() {
          this.vcUrl = '/verifyCode?time='+new Date();
        },
        submitClick() {
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              this.loading = true;
              this.postRequest('/doLogin', this.loginForm).then(resp => {
                this.loading = false;
                if (resp && resp.status == 200) {
                  this.$store.commit('INIT_CURRENTHR', resp.object);
                  window.sessionStorage.setItem("user", JSON.stringify(resp.object));
                  let path = this.$route.query.redirect;
                  this.$router.replace({
                    path: path == '/' || path == undefined ? '/home': path
                  });
                } else {
                  this.vcUrl = '/verifyCode?time='+new Date();
                }
              });
            } else {
              return false;
            }
          });
        }
      }
    }
</script>

<style>
  .loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .loginTitle {
    margin: 15px auto 20px auto;
    text-align: center;
    color: #505458;
  }

  .loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
  }
</style>
